<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HBase + ECharts 分析</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</head>
<body>
<div id="salesChart" style="width: 600px; height: 400px;"></div>
<div id="vegetablesChart" style="width: 600px; height: 400px;"></div>
<div id="paymentChart" style="width: 600px; height: 400px;"></div>
<div id="discountChart" style="width: 600px; height: 400px;"></div>
<div id="productChart" style="width: 600px; height: 400px;"></div>
<div id="categoryChart" style="width: 600px; height: 400px;"></div>

<script>
    function drawLine(id, title, xAxis, yAxis, seriesData) {
        const chart = echarts.init(document.getElementById(id));
        chart.setOption({
            title: {text: title},
            tooltip: {},
            xAxis: {type: 'category', data: xAxis},
            yAxis: {},
            series: [{type: 'line', data: seriesData}]
        });
    }

    function drawBar(id, title, xAxis, seriesData) {
        const chart = echarts.init(document.getElementById(id));
        chart.setOption({
            title: {text: title},
            tooltip: {},
            xAxis: {type: 'category', data: xAxis},
            yAxis: {},
            series: [{type: 'bar', data: seriesData}]
        });
    }

    fetch('/api/data/monthly-sales').then(r => r.json()).then(data => {
        drawLine('salesChart', '每月销售额对比', Object.keys(data), null, Object.values(data));
    });

    fetch('/api/data/vegetables').then(r => r.json()).then(data => {
        drawLine('vegetablesChart', '每月蔬菜销量', Object.keys(data), null, Object.values(data));
    });

    fetch('/api/data/payment-methods').then(r => r.json()).then(data => {
        drawBar('paymentChart', '支付方式使用量', Object.keys(data), Object.values(data));
    });

    fetch('/api/data/top-discounts').then(r => r.json()).then(data => {
        drawBar('discountChart', '折扣金额前5商品', data.map(d => d.key), data.map(d => d.value));
    });

    fetch('/api/data/top-products').then(r => r.json()).then(data => {
        drawBar('productChart', '销量前5商品', data.map(d => d.key), data.map(d => d.value));
    });

    fetch('/api/data/categories').then(r => r.json()).then(data => {
        drawBar('categoryChart', '各类商品销量', Object.keys(data), Object.values(data));
    });
</script>
</body>
</html>